<style scoped>
    .layout{
        height:100%;
        background: #f5f7f9;
    }
    .layout-logo{
        width: 200px;
        height: 30px;
        color:skyblue;
        line-height:30px;
        font-size:18px;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-nav{
        width: auto;
        position:absolute;
        right: 15px;
    }
    .layout-assistant{
        width: 300px;
        margin: 0 auto;
        height: inherit;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        height:calc(100% - 138px);
        margin: 15px;
        overflow: auto;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
        height:100%;
        border-left: 1px solid #dddee1;
    }
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .ivu-row,.ivu-col-span-20{
        height:100%;
    }
    .ivu-menu-vertical.ivu-menu-light:after {
        content: '';
        display: block;
        width: 0px;
        height: 100%;
        background: #dddee1;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
}
</style>
<template>
    <div class="layout">
        <Menu mode="horizontal" theme="dark">
            <div class="layout-logo">RMS-FRONT-END-VUE</div>
            <div class="layout-nav">
                <MenuItem name="1">
                    <Icon type="ios-navigate"></Icon>
                    用户：郝鹏鹏鹏
                </MenuItem>
                <MenuItem name="2">
                    <Icon type="ios-navigate"></Icon>
                    部门：技术支撑部
                </MenuItem>
            </div>
        </Menu>
        <div class="layout-content">
            <Row>
                <Col span="4">
                    <Menu width="auto" :open-names="['纳税申报']" accordion @on-select="route">
                            <Submenu v-bind:name="item.title" v-for="item in menu">
                                <template slot="title">
                                    <Icon type="ios-navigate"></Icon>
                                    {{item.title}}
                                </template>                               
                                <MenuItem v-bind:name="subItem.route" v-for="subItem in item.children">
                                    {{subItem.title}}
                                </MenuItem>                               
                            </Submenu>                   
                    </Menu>
                </Col>
                <Col span="20">
                    <div class="layout-content-main">
                        <router-view></router-view>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="layout-copy">
            2011-2016 &copy; TalkingData
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                menu:   [{
                    "children": [{
                        "children": null,
                        "icon": null,
                        "href": "route/role.do",
                        "title": "角色管理",
                        "menuSign": "1",
                        "spread": false,
                        "route": "/index/role"
                    }, {
                        "children": null,
                        "icon": null,
                        "href": "route/user.do",
                        "title": "用户管理",
                        "menuSign": "1",
                        "spread": false,
                        "route": "/index/user"
                    }, {
                        "children": null,
                        "icon": null,
                        "href": "route/org.do",
                        "title": "机构管理",
                        "menuSign": "1",
                        "spread": false,
                        "route": "/index/org"
                    }, {
                        "children": null,
                        "icon": null,
                        "href": "route/permission.do",
                        "title": "菜单管理",
                        "menuSign": "1",
                        "spread": false,
                        "route": "/index/menu"
                    }],
                    "icon": null,
                    "href": null,
                    "title": "权限管理",
                    "menuSign": "1",
                    "spread": false
                }, {
                    "children": [{
                        "children": null,
                        "icon": null,
                        "href": "route/tableEditor.do",
                        "title": "报表编辑器",
                        "menuSign": "1",
                        "spread": false,
                        "route": "/index/tableEdit"
                    }],
                    "icon": null,
                    "href": null,
                    "title": "报表管理",
                    "menuSign": "1",
                    "spread": false
                }, {
                    "children": [{
                        "children": null,
                        "icon": null,
                        "href": "route/manage.do",
                        "title": "纳税申报管理",
                        "menuSign": "1",
                        "spread": false,
                        "route": "/index/manage"
                    }, {
                        "children": null,
                        "icon": null,
                        "href": "route/audit.do",
                        "title": "纳税申报审核",
                        "menuSign": "1",
                        "spread": false,
                        "route": "/index/audit"
                    }, {
                        "children": null,
                        "icon": null,
                        "href": "route/reviseJournal.do",
                        "title": "申报数据修正",
                        "menuSign": "1",
                        "spread": false,
                        "route": "/index/revise"
                    }, {
                        "children": null,
                        "icon": null,
                        "href": "route/goods.do",
                        "title": "商品分类管理",
                        "menuSign": "1",
                        "spread": false,
                        "route": "/index/goods"
                    }, {
                        "children": null,
                        "icon": null,
                        "href": "route/code.do",
                        "title": "分类编码管理",
                        "menuSign": "1",
                        "spread": false,
                        "route": "/index/code"
                    }, {
                        "children": null,
                        "icon": null,
                        "href": "route/sync.do",
                        "title": "进项发票同步",
                        "menuSign": "1",
                        "spread": false,
                        "route": "/index/sync"
                    }],
                    "icon": null,
                    "href": null,
                    "title": "纳税申报",
                    "menuSign": "1",
                    "spread": false
                }]
                        }
                    },
        methods:{
            route: function(name){
                this.$router.push({path: name});
            }
        }
    
    
    }
</script>
